<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'swiper'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section page-section-spacing swiper">
			<onekit-swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<template v-for="item in background">
					<onekit-swiper-item :key="item.item">
						<onekit-view :onekit-class="`swiper-item ${item}`"></onekit-view>
					</onekit-swiper-item>
				</template>
			</onekit-swiper>
		</onekit-view>
		<onekit-view onekit-class="page-section" onekit-style="margin-top: 20px;margin-bottom: 0;">
			<onekit-view onekit-class="weui-cells weui-cells_after-title">
				<onekit-view onekit-class="weui-cell weui-cell_switch">
					<onekit-view onekit-class="weui-cell__bd">指示点</onekit-view>
					<onekit-view onekit-class="weui-cell__ft">
						<onekit-switch :checked="indicatorDots" @Change="changeIndicatorDots"></onekit-switch>
					</onekit-view>
				</onekit-view>
				<onekit-view onekit-class="weui-cell weui-cell_switch">
					<onekit-view onekit-class="weui-cell__bd">自动播放</onekit-view>
					<onekit-view onekit-class="weui-cell__ft">
						<onekit-switch :checked="autoplay" @Change="changeAutoplay"></onekit-switch>
					</onekit-view>
				</onekit-view>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section page-section-spacing">
			<onekit-view onekit-class="page-section-title">
				<onekit-text>幻灯片切换时长(ms)</onekit-text>
				<onekit-text onekit-class="info">{{duration}}</onekit-text>
			</onekit-view>
			<onekit-slider :value="duration" min="500" max="2000" @Change="durationChange"></onekit-slider>
			<onekit-view onekit-class="page-section-title">
				<onekit-text>自动播放间隔时长(ms)</onekit-text>
				<onekit-text onekit-class="info">{{interval}}</onekit-text>
			</onekit-view>
			<onekit-slider :value="interval" min="2000" max="10000" @Change="intervalChange"></onekit-slider>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../../page/common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../../page/common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "swiper",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../../weixin2vue/wx.js';
import Macro from '../../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../../weixin2vue/OnekitComponent.js';
export default Page(ONEKIT_JSON,["indicatorDots","autoplay","interval","duration","background"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'swiper',
        "path":'page/component/pages/swiper/swiper'
};
    },
    "data":{
        "background":[
          'demo-text-1',
          'demo-text-2',
          'demo-text-3'
        ],
        "indicatorDots":true,
        "vertical":false,
        "autoplay":false,
        "interval":2000,
        "duration":500
},
    "changeIndicatorDots"(){
      this.setData({
        "indicatorDots":!this.data.indicatorDots
});
    },
    "changeAutoplay"(){
      this.setData({
        "autoplay":!this.data.autoplay
});
    },
    "intervalChange"(e){
      this.setData({
        "interval":e.detail.value
});
    },
    "durationChange"(e){
      this.setData({
        "duration":e.detail.value
});
    }
});

</script>
<style 
 lang="css">
@import '/page/common/lib/weui.css';
.onekit-button {
  margin-bottom: 15px ;
}
.onekit-button:last-child {
  margin-bottom: 0 ;
}
.page-section-title {
  padding: 0 ;
}
.swiper-item {
  display: block ;
  height: 150px ;
}
.page-section-title {
  margin-top: 30px ;
  position: relative ;
}
.info {
  position: absolute ;
  right: 0 ;
  color: #353535 ;
  font-size: 15px ;
}
.page-foot {
  margin-top: 25px ;
}
</style>